<template>
  <MyCard title="热门景区排行">
    <div class="rank">
      <div class="title">
        <span>排名</span>
        <span>景区</span>
        <span>预约数量</span>
      </div>
      <div class="charts" ref="charts"></div>
    </div>
  </MyCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ranking1, ranking2, ranking3, ranking4 } from '../../assets/ranking-icon';
const colors = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
const charts = ref();
interface ChartProp {
  name: string;
  value: number;
  percentage: string;
  maxValue: number;
}
const data = [
  {
    value: 79999,
    name: '黄山',
    percentage: '80%',
    maxValue: 100000,
  },
  {
    value: 69999,
    name: '天堂寨',
    percentage: '70%',
    maxValue: 100000,
  },
  {
    value: 59999,
    name: '长城',
    percentage: '60%',
    maxValue: 100000,
  },
  {
    value: 49999,
    name: '故宫',
    percentage: '50%',
    maxValue: 100000,
  },
  {
    value: 39999,
    name: '华山',
    percentage: '40%',
    maxValue: 100000,
  },
];

onMounted(() => {
  const myCharts = echarts.init(charts.value);
  const option = {
    title: {},
    xAxis: {
      type: 'value',
      show: false,
      // 坐标轴轴线相关设置
      axisLine: {
        show: false,
        lineStyle: {
          color: 'white',
        },
      },
      nameGap: 1,
      // 分割线
      splitLine: {
        show: false, // 不要分割线
      },
    },
    yAxis: [
      {
        show: true,
        data: data.map((item: ChartProp) => item.name),
        inverse: true, // 是否是反向坐标轴
        // 坐标轴轴线相关设置
        axisLine: {
          show: false,
        },
        // 坐标轴刻度相关设置
        axisTick: {
          show: false,
        },
        // 分割线
        splitLine: {
          show: false, // 不要分割线
        },
        axisLabel: {
          color: '#fff',
          formatter: (value: string) => {
            const str = value.length > 6 ? value.slice(0, 6) + '...' : value;
            const index = data.map((item: ChartProp) => item.name).indexOf(value) + 1;

            return ['{' + (index > 3 ? 'lg' : 'lg' + index) + '|NO.' + index + '}', '{title|' + str + '}'].join(' ');
          },
          rich: {
            lg1: {
              width: 60,
              backgroundColor: {
                image: ranking1,
              },
              color: '#fff',
              align: 'center',
              height: 20,
              fontSize: 13,
            },
            lg2: {
              width: 60,
              backgroundColor: {
                image: ranking2,
              },
              color: '#fff',
              align: 'center',
              height: 20,
              fontSize: 13,
            },
            lg3: {
              width: 60,
              backgroundColor: {
                image: ranking3,
              },
              color: '#fff',
              align: 'center',
              height: 20,
              fontSize: 13,
            },
            lg: {
              width: 60,
              backgroundColor: {
                image: ranking4,
              },
              color: '#fff',
              align: 'center',
              height: 20,
              fontSize: 13,
            },
            title: {
              width: 60,
              fontSize: 13,
              align: 'center',
              padding: [0, 10, 0, 15],
            },
          },
        },
      },
      {
        show: true,
        data,
        inverse: true, // 是否是反向坐标轴
        // 坐标轴刻度标签的相关设置
        axisLabel: {
          fontSize: 14,
          color: '#fff',
          margin: 20,
          formatter: (value: number) => {
            return value >= 10000 ? (value / 10000).toFixed(2) + 'w' : value + '';
          },
        },
        // 坐标轴轴线相关设置
        axisLine: {
          show: false,
        },
        // 坐标轴刻度相关设置
        axisTick: {
          show: false,
        },
        // 分割线
        splitLine: {
          show: false, // 不要分割线
        },
      },
    ],
    grid: {
      top: 10,
      left: 50,
      right: 30,
      bottom: 10,
      containLabel: true,
    },
    series: [
      {
        type: 'bar',
        data,
        barWidth: 16,
        // 柱条样式
        itemStyle: {
          color: (data: any) => {
            return colors[data.dataIndex];
          },
          borderRadius: 8,
          borderWidth: 8,
          borderColor: 'transparent',
        },
        label: {
          show: true,
          position: [12, 3],
          lineHeight: 14,
          color: '#fff',
          formatter: (params: any) => {
            return (params.data as ChartProp).percentage;
          },
        },
        // 显示柱条背景颜色
        showBackground: true,
        // 柱条背景颜色样式
        backgroundStyle: {
          color: 'transparent',
          borderColor: '#1B5E8E',
          borderWidth: 2,
          borderRadius: 8,
        },
      },
    ],
  };
  myCharts.setOption(option);
});
</script>

<style lang="scss" scoped>
.rank {
  flex: auto;
  display: flex;
  flex-direction: column;
  .title {
    background: url('../../images/rankingChart-bg.png') no-repeat;
    background-size: 100% 100%;
    height: 40px;
    margin: 30px 30px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;

    > span {
      display: block;
      text-align: center;
      margin: auto;
      font-size: 16px;
      color: #fff;
    }
  }
  .charts {
    flex: auto;
  }
}
</style>
